<template>
	<view>
		<view class="pics">
			<scroll-view class="left" scroll-y :show-scrollbar="false">
				<view v-for="(item, index) in data" :key="item.id" :class="active === index ? 'active' : ''" @click="ds(index)">{{ item.title }}</view>
			</scroll-view>
			<scroll-view class="right" scroll-y>
				<view class="item">
					<image src="../../static/logo.png" mode="heightFix" @click="previewImg('../../static/logo.png')"></image>
				</view>
				<view>
					<text class="text">范德萨发男方女方范德萨发的南非是积分多少你范德萨发的好就收</text>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			active: 0,
			data: [
				{
					title: '家具生活',
					id: '14'
				},
				{
					title: '摄影设计',
					id: '15'
				},
				{
					title: '明星美女',
					id: '16'
				},
				{
					title: '空间设计',
					id: '17'
				},
				{
					title: '户型装饰',
					id: '18'
				},
				{
					title: '广告摄影',
					id: '19'
				},
				{
					title: '摄影学习',
					id: '20'
				},
				{
					title: '摄影素材',
					id: '21'
				},
				{
					title: '明星写真',
					id: '22'
				}
			]
		};
	},
	methods: {
		getPicsCate() {
			this.$myRequest({
				url: ''
			});
		},
		ds(index) {
			this.active = index;
			console.log(event);
		},
		previewImg(url) {
			// console.log(url)
			uni.previewImage({
				urls:[url],
				current: url
			})
		}
	}
};
</script>

<style lang="scss">
page {
	height: 100%;
}
.pics {
	height: 100%;
	display: flex;
	// margin-left: 10rpx;
	.left {
		width: 200rpx;
		height: 100%;
		border-right: 1px solid #eee;
		view {
			height: 50px;
			line-height: 50px;
			color: #333;
			font-size: 30rpx;
			text-align: center;
			border-top: 1px solid #eee;
		}
		.active {
			background-color: $shop-color;
		}
	}
	.right {
		height: 100%;
		width: 530rpx;
		margin: 0 3px;
	   .item{
		   width: 530rpx;
		   // height: 530rpx;
		   border-radius: 5px;
	   }
	   .text{
		   margin-top: 20px;
		   font-size: 14rpx;
		   font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
	   }
	}
}
</style>
